<template>
  <header class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <a href="https://www.mi.com/shop" target="_blank" class="flex items-center">
        <img src="@/assets/mm.png" alt="书店logo" class="h-10">
      </a>
      <nav class="flex space-x-6">
        <!-- 登陆后，显示以下按钮 -->
        <template v-if="userItemStore.loggedIn">
          <router-link class="text-orange-600 hover:text-orange-800 transition-colors duration-300">欢迎您：{{userItemStore.user===undefined?"游客":userItemStore.user.account}}</router-link>
          <router-link to="/shoppingCart" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">购物车</router-link>
          <router-link to="/myStorage" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">我的收藏</router-link>
          <router-link to="/myOrder" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">我的订单</router-link>
          <router-link to="/"  @click="logout" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">退出</router-link>
        </template>

        <!-- 登陆前，显示以下按钮 -->
        <template v-else>
          <router-link to="/login" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">登录</router-link>
          <router-link to="/register" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">注册</router-link>
        </template>
        <!-- 无论是否登录都显示-->
        <router-link to="/" class="text-orange-600 hover:text-orange-800 transition-colors duration-300">首页</router-link>
      </nav>
    </div>
  </header>
</template>
<script setup>

import {onMounted} from "vue";
import axios from "axios";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import { userStore } from '@/store/index.js'
const userItemStore = userStore()

//退出
const logout = ()=>{

  axios.get(`/user/logout/${userItemStore.user.id}`).then(resp=>{
    ElMessage.success(resp.data);
    //跳转到主页
    setTimeout(()=>{
      location.href="http://localhost:9000";
    },500)
    //删除本地存储
    localStorage.removeItem('token');
    localStorage.removeItem('user');

    //提示信息
    userItemStore.updateUser(null);
    userItemStore.updateLoginStatus(false);

  })
}


onMounted(()=>{

})

</script>
<style scoped>
header {
  position: sticky;
  top: 0;
  z-index: 100;
}
</style>